<template>
	<u-modal
		:value="visible"
		confirm-text="关闭"
		:mask-close-able="false"
		:show-cancel-button="false"
		:title-style="{ display: 'none' }"
		:confirm-style="{ height: '80rpx', lineHeight: '80rpx' }"
		@confirm="confirmClick"
	>
		<view class="qrcodeModal">
			<view class="modalTitle">
				<text>{{ title }}</text>
				<view class="saveBtnCon"><u-button type="success" size="mini" @click="saveClick" :disabled="!name && !imgUrl">保存</u-button></view>
			</view>
			<view class="imgCon" v-if="imgUrl"><image class="imgItem" mode="aspectFit" :src="'data:image/png;base64,' + imgUrl"></image></view>
		</view>
	</u-modal>
</template>

<script>
import { saveImg } from '../../utils/saveImg.js';
export default {
	props: {
		visible: {
			type: Boolean,
			default: false
		},
		detail: {
			type: Object,
			default: () => {
				return {};
			}
		},
		title: {
			type: String,
			default: '二维码'
		},
		imgUrl: {
			//base64数据
			type: String,
			default: ''
		},
		name: {
			type: String,
			default: ''
		},
		saveDir: {
			type: String,
			default: 'defImg'
		}
	},
	data() {
		return {};
	},
	methods: {
		confirmClick() {
			this.$emit('confirm-click');
		},
		saveClick() {
			let saveDir = this.saveDir;
			let saveUrl = `${wx.env.USER_DATA_PATH}/${saveDir}/${this.name}.png`;
			saveImg(saveDir, saveUrl, this.imgUrl);
		}
	}
};
</script>

<style lang="less">
.qrcodeModal {
	padding: 12rpx;
	.modalTitle {
		position: relative;
		padding: 12rpx;
		text-align: center;
		font-size: 36rpx;
		.saveBtnCon {
			position: absolute;
			right: 12rpx;
			top: 12rpx;
		}
	}
}
</style>
